<template>
  <div class="company">
    <search-com @close-search="closeShow"
      v-if="showSearch"></search-com>
    <company-info :companyId="company_id"
      @update:close-company="closeCompany"
      v-if="showCompany"></company-info>
    <Layout>
      <!--固定，移动端的页面基本都是 顶天立地的 顶部 header 底部 tabbar-->
      <van-sticky :offset-top="0">
        <!--1. 搜索-->
        <div class="search">
          <div class="title">
            <h3>
              公司
            </h3>
          </div>
          <div class="kw"
            @click="searchShow">
            <input type="text"
              placeholder="搜索..."
              disabled>
            <img class="fdj"
              :src="sousuoIcon"
              alt="放大镜">
          </div>

        </div>
      </van-sticky>

      <!-- 公司列表 -->
      <div class="Cards">
        <!-- 是用无尽滚动需要Tina阿基overflow:auto以及height高度 -->
        <div class="company-list"
          style="overflow: auto"
          ref="listWrap">
          <ul class="list"
            v-infinite-scroll="loadmore"
            :infinite-scroll-disabled="disable"
            infinite-scroll-immediate="false"
            infinite-scroll-distance="1">
            <li class="item"
              @click="lookCompany(company._id)"
              v-for="company in state.companyList"
              :key="company._id">
              <div class="company-info">
                <div class="left">
                  <div class="img"><img :src="company.logoUrl"
                      alt=""></div>
                </div>
                <div class="right">
                  <div class="top">
                    <div class="info">
                      <h2>{{company.title}}</h2>
                      <p>
                        <span>{{company.workInfo[0].workAddress}}</span>|
                        <span>{{company.companyType}}</span>|
                        <span>{{company.companyNumber}}</span>

                      </p>
                      <div class="tags">
                        <span v-for="(e,i) in company.workInfo[0].welfare"
                          :key="i">{{ e }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="bottom">
                    <div class="hot-notice">
                      <div class="notice">
                        热招: <span>{{company.workInfo[0].title}}等{{company.workInfo.length}}个岗位</span>
                      </div>
                      <div class="icon">
                        <van-icon name="arrow" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>

          </ul>
          <p v-if="noMore"
            class="no-more">暂无更多的数据...</p>
        </div>
      </div>
    </Layout>
  </div>
</template>
<script setup lang="ts">
  import Layout from '../Layout/index.vue'
  import selectIcon from '../../assets/icon/xuanze.png'
  import sousuoIcon from '../../assets/icon/sousuo.png'
  import b1 from '../../assets/banner/b1.jpg'
  import clogo from '../../assets/banner/company-logo.jpg'
  import CompanyInfo from './CompanyInfo.vue'
  import { reactive, onMounted, ref, Ref, toRaw, computed } from 'vue'
  import { getCompanyList, ICompanyInfoTwo } from '@/api/work'
  import SearchCom from '../../components/Search/SearchCom.vue'
  // 加载loading
  let showLoading = ref(false)
  // 弹出公司信息组件
  let showCompany = ref(false)
  const closeCompany = () => {
    showCompany.value = false
  }
  let company_id = ref('')
  const lookCompany = (id: string) => {
    showCompany.value = true
    company_id.value = id
  }

  // 搜索框弹出
  let showSearch = ref(false)
  const searchShow = () => {
    showSearch.value = true
  }
  const closeShow = () => {
    showSearch.value = false
  }

  // 当前页的页数
  let page = ref(0)
  // 总共的职位数量
  let total = ref(9999999)
  // 判断还有没有更多了
  let noMore = computed(() => state.companyList.length >= total.value)
  let disable = computed(() => noMore.value)
  // 如果有多个属性,要定义,可以通过type进行设置
  type StateType = {
    companyList: ICompanyInfoTwo[]
  }
  const state: StateType = reactive({
    companyList: []
  })
  // vue在mounted中挂载数据,因为没有created了
  onMounted(() => {
    getCompanyListData()
  })
  // 获取轮播图
  // 切换选项卡后,内容滚会顶部
  // 点击tab触发选项卡切换
  const getCompanyListData = async () => {
    let rs = await getCompanyList({ page: 0, size: 5 })
    state.companyList = rs.data.list
    console.log(state.companyList)
  }

  // 加载更多
  const loadmore = async () => {
    console.log(1122)

    page.value++
    const newCompanyList = await getCompanyList({ page: page.value })
    // console.log(newWorkList.data.list)
    const newRs = newCompanyList.data.list
    state.companyList = [...toRaw(state.companyList), ...newRs]
    // console.log(state.workList)
    // 接口中有总数
    total.value = newCompanyList.data.total
  }
</script>
<style lang="less" scoped>
@mainColor: #149639;
.company {
  // 顶部搜索
  .search {
    background-color: #149639;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px;

    .title {
      display: flex;
      align-items: center;
      h3 {
        /*
                        移动端要适配 一般使用方案？ rem 方法
                            规则：基准设计稿 iPhone6 ： 750px * 1344px
                            1rem = 100px
                            其他的元素都以这个基准换算为rem单位
                            后面在动态的去更改 html 根标签的 font-size 值，实现等比的缩放。
                    */
        /*webstorm px2rem alt+d 自动转换 */
        font-size: 20px;
        color: #fff;
        margin-right: 10px;
      }
    }

    .kw {
      flex: 1;
      position: relative;
      input {
        width: 100%;
        outline: none;
        border: none;
        padding-left: 13px;
        // width: 50px;
        height: 35px;
        line-height: 35px;
        background: #f4f4f4;
        border-radius: 15px;
      }

      .fdj {
        position: absolute;
        // top: 8px;
        top: 8px;
        right: 20px;
        width: 20px;
        height: 20px;
        // right: 35px;
      }
    }
  }

  // 公司卡
  .Cards {
    // padding: 0 13px;
    .company-list {
      height: calc(100vh - 40px - 70px);
      .list {
        .item {
          width: 90%;
          margin: 0 auto;
          // height: 145px;
          margin-top: 16px;
          border-radius: 10px;
          box-shadow: 0 0 10px -5px #149639;
          padding: 20px 0 15px 0;
          // padding: 14px 0 18px 0;
          // border-bottom: 1px solid #f4f4f4;

          .company-info {
            padding: 0px 13px 0px 13px;
            margin-top: 10px;
            display: flex;
            justify-content: space-around;
            .left {
              display: flex;
              .img {
                width: 35px;
                height: 35px;
                border-radius: 50%;
                img {
                  width: 35px;
                  height: 35px;
                }
              }
            }
            .right {
              flex: 1;
              .top {
                border-bottom: 1px solid #f4f4f4;
                padding: 0px 0 15px 0;
                .info {
                  margin-left: 10px;
                  h2 {
                    font-size: 13px;
                  }
                  p {
                    margin-top: 5px;
                    color: #b7b7b7;
                    font-size: 12px;
                    span {
                      margin-right: 10px;
                    }
                  }
                }
                .tags {
                  margin-top: 10px;
                  span {
                    margin-top: 10px;
                    display: inline-block;
                    background: #f4f4f4;
                    color: #b7b7b7;
                    // width: 35px;
                    padding: 0 5px;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                    border-radius: 5px;
                    margin-right: 5px;
                  }
                }
              }
              .bottom {
                // flex-shrink: 1;
                margin-top: 15px;
                .hot-notice {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  span {
                    color: @mainColor;
                  }
                }
              }
              // margin: 10px auto;
            }
          }
        }
      }
      .no-more {
        padding: 10px 0;
        text-align: center;
        color: #666;
      }
    }
  }
}
</style>